import { type DeepReadonly, type InjectionKey, type UnwrapNestedRefs, reactive, readonly } from 'vue';
import type { $AllColorStr } from '../types/interface';
import { isObject } from '../utils/verify';

/** ID 的类型（也是 Provide/Inject中装的值的类型） */
export type CollapseID = `__MXP-COLLAPSE-${string}__`;

/** mxp-collapse-item组件中需要mxp-collapse组件传递的数据 */
export type MxpCollapseProps = {
  /** 展开的 name 数组 */
  unfoldNameList?: (number | string)[];
  /** 图标的位置 */
  iconPosition?: 'left' | 'right';
  /** 动画时间 */
  duration?: number;
  /** 标题上下框颜色(如不需要边框可设为fasle) */
  itemBorderColor?: $AllColorStr | boolean | 'transparent';
  /** 是否显示最后一行的边框 */
  showLastborder?: boolean;
};

export type MxpCollapseConfig = {
  /** mxp-collapse-item组件中需要mxp-collapse组件传递的数据 */
  collapseProps?: MxpCollapseProps;
  /** 更新折叠状态(如果是折叠状态就删除 key ，如果是未折叠状态就添加 key)  */
  changeUnfoldByKey?: (key: number | string) => void;
};

/** 存储变量（内部使用） */
const mxpCollapseConfigs = reactive<Record<string, MxpCollapseConfig>>({});

/** Provide/Inject的 key */
export const collapseInjectKey: InjectionKey<CollapseID> = Symbol('__mxp-collapse-config-id__');

/** 自定义的状态管理对象 */
export function mxpCollapseStore() {
  return {
    state: readonly(mxpCollapseConfigs) as DeepReadonly<UnwrapNestedRefs<Record<string, MxpCollapseConfig>>>,
    actions: {
      /** 设置 mxp-form 的 props */
      setFormProps(id: CollapseID, collapseProps: MxpCollapseProps) {
        if (isObject(mxpCollapseConfigs[id])) {
          mxpCollapseConfigs[id].collapseProps = collapseProps;
        } else {
          mxpCollapseConfigs[id] = { collapseProps };
        }
      },
      /** 设置 changeUnfoldByKey 方法 */
      setChangeUnfoldByKeyFun(id: CollapseID, changeUnfoldByKey: MxpCollapseConfig['changeUnfoldByKey']) {
        if (isObject(mxpCollapseConfigs[id])) {
          mxpCollapseConfigs[id].changeUnfoldByKey = changeUnfoldByKey;
        } else {
          mxpCollapseConfigs[id] = { changeUnfoldByKey };
        }
      },
      /** 通过 ID 删除 */
      delItemByID(id: CollapseID) {
        if (mxpCollapseConfigs[id]) {
          delete mxpCollapseConfigs[id];
        }
      },
    },
  };
}
